<?php
/**
 * Created by PhpStorm.
 * Author: QinShuai
 * Email: qinshuai0423@qq.com
 * Date: 2021/6/11
 */


/* @var $this yii\web\View */
/* @var $list yii\web\View */
$controller = $this->context->id;
?>
<div class="index">
    <!--搜索-->
    <div class="search">
        <div class="section-body">
            <!--搜索-->
            <el-form label-width="100px" label-position="left">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="用户名：">
                            <el-input
                                    placeholder="请输入内容"
                                    v-model="searchData.username"
                                    clearable>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="时间：">
                            <el-date-picker
                                    v-model="searchData.times"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3"><el-button type="primary" icon="el-icon-search" @click="searchInput">搜索</el-button></el-col>
                </el-row>
            </el-form>
        </div>
    </div>
    <!--按钮-->
    <div class="button">
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success" @click="handleAdd">添加</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
    </div>

    <div class="content">
        <template>
            <!--表格-->
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    height="100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="ID"
                        sortable
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="角色名称"
                        width="180">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status=='1'">启用</span>
                        <span v-else>禁用</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDeleteConfirm(scope.$index, scope.row)">删除
                        </el-button>
                        <el-button
                                size="mini"
                                type="success"
                                @click="handleAuth(scope.$index, scope.row)">授权
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <el-row type="flex" class="page" justify="end">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="count">
                </el-pagination>
            </el-row>
        </template>
        <!--编辑-->
        <el-dialog
                title="添加/编辑"
                :visible.sync="centerDialogVisible"
                width="50%"
                center>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item hidden>
                    <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="角色名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="form.status">
                        <el-radio label="1">启用</el-radio>
                        <el-radio label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>
        <!--授权-->
        <el-dialog
                title="授权"
                :visible.sync="authDialogVisible"
                width="50%"
                center>
            <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText">
            </el-input>
            <el-tree
                    class="filter-tree"
                    :data="rules"
                    node-key="id"
                    show-checkbox
                    :props="defaultProps"
                    :filter-node-method="filterNode"
                    ref="tree">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onAddRule">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</div>
<?php $this->beginBlock('js'); ?>
<script>
    App = {
        data: {
            multipleSelection: [],
            authDialogVisible: false,
            rules:<?php echo $this->params['data']['rule']?>,
            form: {
                id: '',
                name: '',
                status: '',
            },
            authForm: {
                id: '',
                rule: '',
            },
            filterText: '',
            defaultProps: {
                children: 'children',
                label: 'title'
            },
            searchData:{
                username:'',
                times: [new Date(2021, 10, 10, 10, 10), new Date(2021, 10, 11, 10, 10)],
            },
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.title.indexOf(value) !== -1;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleAuth(index, row) {
                this.authDialogVisible = true;
                this.authForm.id = row.id;
                setTimeout(()=>{
                    this.$refs.tree.setCheckedKeys(row.rule);
                },0)
            },
            onAddRule(index, row) {
                let that = this;
                that.authForm.rule = that.$refs.tree.getCheckedKeys().join(',');
                let data = that.authForm;
                let url = "/<?=$controller?>/save";
                $request.post(url, data, function (res) {
                    if (res.status && res.data.code == '0') {
                        that.authDialogVisible = false;
                        that.init();
                    }
                })

            }
        }
    }
</script>
<?php $this->endBlock(); ?>
